<template>
    <div class="cart-page">
      <AppBreadcrumb :items="breadcrumbs" />
      
      <div class="container-custom py-8">
        <h1 class="text-3xl font-bold mb-8">购物车</h1>
        
        <!-- 空购物车 -->
        <div v-if="cart.count === 0" class="text-center py-16">
          <div class="i-mdi-cart-off text-8xl text-gray-300 mb-4" />
          <p class="text-gray-600 mb-6">购物车是空的</p>
          <NuxtLink to="/products" class="btn-primary">
            去逛逛
          </NuxtLink>
        </div>
        
        <!-- 购物车列表 -->
        <div v-else class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 商品列表 -->
          <div class="lg:col-span-2 space-y-4">
            <div class="card p-4 flex items-center space-x-2 mb-4">
              <input
                v-model="selectAll"
                type="checkbox"
                @change="toggleSelectAll"
              />
              <span class="text-sm">全选</span>
              <button
                class="ml-auto text-sm text-red-600 hover:text-red-700"
                @click="removeSelected"
              >
                删除选中
              </button>
            </div>
            
            <CartItem
              v-for="item in cart.items"
              :key="item.product.id"
              :item="item"
              v-model:selected="selectedItems[item.product.id]!"
              @update-quantity="updateQuantity"
              @remove="removeItem"
            />
          </div>
          
          <!-- 结算信息 -->
          <div class="lg:col-span-1">
            <CartSummary
              :items="selectedCartItems"
              :total="selectedTotal"
              @checkout="handleCheckout"
            />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
//   definePageMeta({
//     middleware: 'auth',
//   })
  
  const cart = useCartStore()
  const router = useRouter()
  
  const breadcrumbs = [
    { label: '购物车', path: '/cart' },
  ]
  
  // 选中的商品
  const selectedItems = reactive<Record<string, boolean>>({})
  const selectAll = ref(false)
  
  // 初始化：全部选中
  onMounted(() => {
    cart.items.forEach(item => {
      selectedItems[item.product.id] = true
    })
    selectAll.value = true
  })
  
  // 选中的商品列表
  const selectedCartItems = computed(() => {
    return cart.items.filter(item => selectedItems[item.product.id])
  })
  
  // 选中商品的总价
  const selectedTotal = computed(() => {
    return selectedCartItems.value.reduce((sum, item) => {
      return sum + item.product.price * item.quantity
    }, 0)
  })
  
  function toggleSelectAll() {
    cart.items.forEach(item => {
      selectedItems[item.product.id] = selectAll.value
    })
  }
  
  function updateQuantity(productId: string, quantity: number) {
    cart.updateQuantity(productId, quantity)
  }
  
  function removeItem(productId: string) {
    cart.removeItem(productId)
    delete selectedItems[productId]
  }
  
  function removeSelected() {
    Object.keys(selectedItems).forEach(productId => {
      if (selectedItems[productId]) {
        cart.removeItem(productId)
        delete selectedItems[productId]
      }
    })
  }
  
  function handleCheckout() {
    if (selectedCartItems.value.length === 0) {
      alert('请选择要结算的商品')
      return
    }
    router.push('/checkout')
  }
  
  // SEO
  useSeoMeta({
    title: '购物车 - 代码小库',
    robots: 'noindex',
  })
  </script>